<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>

<!--
    推荐网址：bootcdn.cn免费的第三方库的推荐网站
    推荐第三方库：
      1.moment.js是一个JavaScript日期处理类库，用于解析、检验、操作、以及显示日期。——体积大
      2.day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 moment.js 的 API 设计保持完全一样。——轻量级
-->

<!--
    过滤器：
      定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑的处理）
      语法：
        1.注册过滤器：Vue.filter(name,callback) 或者new Vue(filters:{})
        2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"
      备注：
        1.过滤器也可以接收额外参数、多个过滤器也可以串联
        2.并没有改变原来的数据，是产生新的对应数据
-->

<div id="root">
  <h2>显示格式化后的时间</h2>
  <!--计算属性实现-->
  <h3>现在是：{{fmtTime}}</h3>
  <!--methods实现-->
  <h3>现在是：{{getFmtTime()}}</h3>
  <!--  过滤器实现-->
  <h3>现在是：{{time|timeFormater}}</h3>
  <!--  过滤器实现(传参、串联)-->
  <!--time传给timeFormater，timeFormater传给mySlice-->
  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<div id="root2">
  <h2>{{msg|mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  // 必须在Vue实例创建之前
  // 全局过滤器
  Vue.filter('mySlice',function (value){
    return value.slice(0,4)
  })

  const vm = new Vue({
    el: '#root',
    data: {
      time: 1708918618858,//时间戳
      msg:'你好，尚硅谷'
    },
    watch: {},
    computed: {
      fmtTime() {
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },
    methods: {
      getFmtTime() {
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },

    //局部过滤器
    //   过滤器——本质是一个函数
    filters: {
      timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss') {
        return dayjs(value).format(str)
      },
     /* mySlice(value) {
        return value.slice(0,4)
      }*/
    }
  })
  new Vue({
    el:'#root2',
    data:{
      msg:'atguigu'
    }
  })
</script>
</html>